<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">商品管理</a>
        </li>
        <li class="active">果子/积分商品列表</li>
    </ul>
</div>


<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">果子/积分商品列表</h4>
            <div class="row">
                <div class="col-sm-3">
                    <a id="addManager" href="#manager-modal" data-toggle="modal"
                       class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加果子/积分商品
                    </a>
                </div>
                <div class="col-sm-9">
                    <form id="searchForm" class="form-inline text-right" role="search">
                        <div class="input-group col-xs-3">
                            <span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
                            <input class="form-control" type="text" name="dateRangePicker"
                                   id="dateRangePicker">
                        </div>&nbsp;&nbsp;
                        <select class="form-control input-sm" id="typeQuery" name="type">
                            <option value="4">&nbsp;&nbsp;&nbsp;&nbsp;果子商品&nbsp;&nbsp;&nbsp;&nbsp;
                            </option>
                            <option value="6">&nbsp;&nbsp;&nbsp;&nbsp;积分商品&nbsp;&nbsp;&nbsp;&nbsp;
                            </option>
                        </select>
                        &nbsp;
                        <div class="input-group">
                            <input id="nameOrMobile" name="nameOrMobile" class="form-control input-sm" type="text"
                                   placeholder="商品名称"/>
                            <span class="input-group-btn">
                                <button id="searchBtn" class="btn btn-xs btn-info" type="button">
                                    <i class="ace-icon fa fa-search"></i> 搜索
                                </button>
					        </span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="company-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace">
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>商品名称</th>
                        <th>封面</th>
                        <th>价格</th>
                        <th>已售数量</th>
                        <th>添加时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog" style="width: 50%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">添加果子商品</h5>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="coverImage"> 商品封面：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="file" id="coverImage" name="coverImage" class="col-xs-16">
                                    <input type="hidden" id="img" name="images"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="price"> 商品价格/积分：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="price" name="price" class="col-xs-12"
                                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                   placeholder="请输入果子价格或积分数"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="introduce">
                                        商品介绍：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" name="id" id="id" class="hidden">
                                            <input type="text" id="introduce" name="introduce" class="col-xs-12"
                                                   placeholder="请输入商品介绍"></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="saledNum"> 已售数量：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="saledNum" name="saledNum" class="col-xs-12"
                                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                   placeholder="请填入数字"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="mouthSale"> 月销量：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="mouthSale" name="mouthSale" class="col-xs-12"
                                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                   placeholder="请填入数字"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="name"> 品名：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="name" name="name" class="col-xs-12"
                                                   placeholder="请输入品名"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="area"> 种植地：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="area" name="area" class="col-xs-12"
                                                   placeholder="请输入种植地"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="weight"> 重量(斤)：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="weight" name="weight" class="col-xs-12"
                                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                   placeholder="请填入数字"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="store">
                                        储藏方式：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="store" name="store" class="col-xs-12"
                                                   placeholder="请输入储藏方式">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="keepDays">
                                        保质期（天）：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="keepDays" name="keepDays" class="col-xs-12"
                                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                   placeholder="请填入数字"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="type"> 分类：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <select class="form-control input-sm" id="type" name="type">
                                                <option value="4">&nbsp;&nbsp;&nbsp;&nbsp;果子&nbsp;&nbsp;&nbsp;&nbsp;
                                                </option>
                                                <option value="6">&nbsp;&nbsp;&nbsp;&nbsp;积分&nbsp;&nbsp;&nbsp;&nbsp;
                                                </option>
                                            </select></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="priceDesc">
                                        费用说明：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <input type="text" id="priceDesc" name="priceDesc" class="col-xs-12"
                                                   placeholder="请输入费用说明：维护费、运费等"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="status"> 状态：</label>
                                    <div class="col-sm-9">
                                        <div class="clearfix">
                                            <label>
                                                <input id="status" name="status"
                                                       class="ace ace-switch ace-switch-4 btn-flat"
                                                       type="checkbox">
                                                <span class="lbl"
                                                      data-lbl="上架 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 下架"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="file" style="float: left">
                                轮播图：</label>
                            <div id="file" class="dropzone"></div>
                            <input type="button" value="上传" class="btn btn-xs btn-primary"
                                   style="width: 65px;height: 30px;float: right"
                                   onclick="dropz.processQueue()">

                        </div>

                        <div class="form-group">
                            <div id="editor1">
                                <p>请编辑商品详情内容...</p>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 取消
                    </button>
                    <button id="save-manager-btn" type="button" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var uplodaImg = [];
        var img;
        var company_table;
        var E = window.wangEditor;
        var editor = new E('#editor1');
        editor.customConfig.uploadImgServer = 'management/uploadArticleImg'; //上传路径
        editor.customConfig.uploadFileName = 'file'; //参数文件名
        editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; //最大2M
        editor.customConfig.uploadImgMaxLength = 1; //每次上传一张
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
//            'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
//            'video',  // 插入视频
//            'code',  // 插入代码 不需要这个 防止SQL注入
            'undo',  // 撤销
            'redo'  // 重复
        ];
        editor.create();

        //wangEditor取值和赋值
        //取值 html格式 editor.txt.html()
        //取值 text格式 editor.txt.text()
        //赋值 editor.txt.html('<p>用 JS 设置的内容</p>')
        //追加内容 editor.txt.append('<p>用 JS 设置的内容</p>')
        //清空内容 editor.txt.clear()


        $(function () {
            company_table = $('#company-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/goodsList'
                },
                columns: [
                    {
                        data: function (row) {
                            return '<div class="center"><label class="pos-rel"><input type="checkbox" name="bathBox" data-id="' + row.id + '" class="ace"><span class="lbl"></span></label></div>';
                        }
                    },
                    {
                        data: 'introduce',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            return "<a target='_blank' href='" + row.coverImage + "'><img class='img-thumbnail' style='height: 70px;width: auto;' src='" + row.coverImage + "'></a>";
                        }
                    },
                    {
                        data: 'price',
                        defaultContent: ''
                    }, {
                        data: 'saledNum',
                        defaultContent: ''
                    }, {
                        data: 'createTime',
                        defaultContent: ''
                    }, {
                        data: function (row) {
                            return row.status ? "<label class='label label-success arrowed'><i class='fa fa-unlock'></i> 上架</label>" : "<label class='label label-danger arrowed-in'><i class='fa fa-lock'></i> 下架</label>";
                        }
                    }, {
                        data: function (row) {
                            var st = row.status ? '&nbsp;&nbsp;<a id="lockUser" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-lock"></i> 下架</a>' : '&nbsp;&nbsp;<a id="unlockUser" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-success"><i class="fa fa-unlock"></i> 上架</a>';
                            var check = '&nbsp;&nbsp;<a id="editArticle" href="javascript:;" data-row="' + row + '" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 编辑</a>';
                            var del = '&nbsp;&nbsp;<a id="delArticle" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 删除</a>';
                            return st + check + del;
                        }
                    }
                ]
            });

            $('#coverImage').ace_file_input({
                no_file: '选择文件 ...',
                btn_choose: '选择',
                btn_change: '更改',
                droppable: false,
                onchange: null,
                thumbnail: false,//| true | large
                whitelist: 'gif|png|jpg|jpeg'
                //blacklist:'exe|php'
            });

            $('#searchBtn').click(function () {
                var param = $("#searchForm").serialize();
                company_table.ajax.url("management/goodsList?" + param).load();
            });

            $('#company-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                $('#company-table').find('tbody > tr').find('input:checkbox').prop("checked", this.checked);
            });

            $('#company-table tbody').on('click', 'a#lockUser', function () {
                var id = $(this).data("id");
                bootbox.confirm("你确定要下架这个商品？", function (r) {
                    if (r) {
                        $.post('management/updateGoodsStatus', {'id[]': id, status: false}, function () {
                            company_table.ajax.reload();
                        });
                    }
                });
            });
            $('#company-table tbody').on('click', 'a#unlockUser', function () {
                var id = $(this).data("id");

                var ids = [];
                ids.push(id);
                bootbox.confirm("你确定要上架这个商品？", function (r) {
                    if (r) {
                        $.post('management/updateGoodsStatus', {'id[]': ids, status: true}, function () {
                            company_table.ajax.reload();
                        });
                    }
                });
            });
            //点击编辑按钮，填充数据
            $("#company-table tbody").on("click", "#editArticle", function () {
                var row = company_table.row($(this).parents("tr")).data();
                $('#status').prop("checked", row.status);
                $('#store').val(row.store);
                $('#keepDays').val(row.keepDays);
                $('#weight').val(row.weight);
                $('#feature').val(row.feature);
                $('#priceDesc').val(row.priceDesc);
                $('#name').val(row.name);
                $('#price').val(row.price);
                $('#id').val(row.id);
                $('#introduce').val(row.introduce);
                $('#saledNum').val(row.saledNum);
                $('#mouthSale').val(row.mouthSale);
                $('#area').val(row.area);
                editor.txt.html(row.detail);
                $("#manager-modal").modal("show");
            });

            //点击删除按钮，删除文章
            $("#company-table tbody").on("click", "#delArticle", function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要删除这个商品？", function (f) {
                    if (f) {
                        $.post("management/removeGoods/" + id, function () {
                            company_table.ajax.reload();
                        });
                    }
                });
            });

            $('input[name=dateRangePicker]').daterangepicker({
                'applyClass': 'btn-sm btn-success',
                'cancelClass': 'btn-sm btn-default',
                locale: {
                    applyLabel: '确认',
                    cancelLabel: '取消',
                    format: 'YYYY-MM-DD'
                }
            })
                .prev().on(ace.click_event, function () {
                $(this).next().focus();
            });

            $("#save-manager-btn").click(function () {
                var texts = editor.txt.text();
                var content = editor.txt.html();

                if ($("#introduce").val() === "") {
                    bootbox.alert("商品名称不能为空");
                    return;
                }

                if ($('#price').val() === "") {
                    bootbox.alert("商品价格/积分不能为空");
                    return;
                }
                if ($('#saledNum').val() === "") {
                    bootbox.alert("商品已售数量不能为空");
                    return;
                }
                if ($('#mouthSale').val() === "") {
                    bootbox.alert("商品月销量不能为空");
                    return;
                }
                if ($('#name').val() === "") {
                    bootbox.alert("商品品名不能为空");
                    return;
                }
                if ($('#area').val() === "") {
                    bootbox.alert("商品种植地不能为空");
                    return;
                }
                if ($('#weight').val() === "") {
                    bootbox.alert("商品重量不能为空");
                    return;
                }
                if ($('#store').val() === "") {
                    bootbox.alert("商品储藏方式不能为空");
                    return;
                }
                if ($('#keepDays').val() === "") {
                    bootbox.alert("商品保质期不能为空");
                    return;
                }
                if ($('#priceDesc').val() === "") {
                    bootbox.alert("商品费用说明不能为空");
                    return;
                }
                if (texts === "") {
                    editor.txt.html("<p style='color: red'>请编辑商品详情内容...</p>");
                    return;
                }

                $("#manager-form").ajaxSubmit({
                    url: 'management/saveGoods',
                    type: 'post',
                    data: {
                        detail: content
                    },
                    success: function (data) {
                        company_table.ajax.reload();
                        $(".modal-title").html("添加商品");
                        $("#manager-modal").modal("hide");
                        uplodaImg = []
                    }
                });
            });

            //模态框隐藏事件
            $("#manager-modal").on("hide.bs.modal", function () {
                $("#manager-form")[0].reset();
                $("#imageUrl").prop("value", "");
                editor.txt.clear();
            });

        });

    </script>

    <!-- 拖拽上传 -->
    <script type="text/javascript">
        Dropzone.autoDiscover = false;
        var dropz = new Dropzone("#file", {
            url: "management/uploadFile",
            addRemoveLinks: true,
            autoProcessQueue: false,
            parallelUploads: 8,
            maxFiles: 8,//最大可上传的文件个数
            maxFilesize: 5,
            /* acceptedFiles: ".bmp,.jpg,.jpeg,.gif,.png", */
            init: function () {
                this.on("removedfile", function (file) {
                    console.log("File " + file.name + "removed");
                });
            },
            success: function (file, data) {
                img = data.data.join(',');
                alert(img);
                uplodaImg.push(img);
                var str = uplodaImg.join(',')
                console.info(str);
                $('input[name=images]').val(str);
                console.error(uplodaImg);
            },
            dictMaxFilesExceeded: "文件数量过多",
            dictDefaultMessage: "拖动文件到该区域或点击上传文件",
            dictCancelUpload: "取消",
            dictCancelUploadConfirmation: "取消上传操作",
            dictRemoveFile: "删除",
            dictFileTooBig: "可添加的最大文件大小为{{maxFilesize}}Mb，当前文件大小为{{filesize}}Mb ",
        });

        dropz.on("removedfile", function (file) {

        })
    </script>
</div>